<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <QuestionBank @search="Search" @search2="Search2" />
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <template>
              <el-alert type="info" show-icon :closable="false">
                <template slot="title">
                  <span>数据一共有{{ counts }}条</span>
                </template>
              </el-alert>
            </template>
            <el-tab-pane label="全部" name="first" @tab-click="handleClick">
              <Choiceness :List="choiceList" @cost="Const" />
            </el-tab-pane>
            <el-tab-pane label="待审核" name="second">
              <Choiceness :List="choiceList" @cost="Const" />
            </el-tab-pane>
            <el-tab-pane label="已审核" name="third">
              <Choiceness :List="choiceList" @cost="Const" />
            </el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth">
              <Choiceness :List="choiceList" @cost="Const" />
            </el-tab-pane>
          </el-tabs>
        </template>

        <el-pagination
          class="pagination"
          :current-page="paging.page"
          :page-sizes="[5, 10, 15, 20, 25]"
          :page-size="paging.pagesize"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入两个子组件
import QuestionBank from '@/components/QuestionBank'
import Choiceness from '@/components/Choiceness'
// 导入精品题库列表API
import { choice } from '@/api/hmmm/questions.js'
export default {
  name: 'Questions',
  data () {
    return {
      activeName: 'first', // 默认第一个
      paging: {
        page: 1, // 当前页数
        pagesize: 5 // 每页行数
      },
      choiceList: [], // 精品数据列表数组
      counts: '',
      total: 0 // 数据总条数
    }
  },
  created () {
    this.choice()
  },

  methods: {
    async handleClick () {
      if (this.activeName === 'first') {
        this.paging.chkState = null
        const res = await choice(this.paging)
        console.log(res)
        this.choiceList = res.data.items
        this.counts = res.data.items.length
        this.total = res.data.counts
      } else if (this.activeName === 'second') {
        this.paging.chkState = 0
        const res = await choice(this.paging)

        this.choiceList = res.data.items
        this.counts = res.data.items.length
        this.total = res.data.counts
      } else if (this.activeName === 'third') {
        this.paging.chkState = 1
        const res = await choice(this.paging)

        this.choiceList = res.data.items
        this.counts = res.data.items.length
        this.total = res.data.counts
      } else {
        this.paging.chkState = 2
        const res = await choice(this.paging)

        this.choiceList = res.data.items
        this.counts = res.data.items.length
        this.total = res.data.counts
      }
    },

    async Search (data) {
      const res = await choice(data)

      this.choiceList = res.data.items
      console.log(this.choiceList)
      this.counts = res.data.items.length
    },

    Search2 () {
      this.choice()
    },

    async choice () {
      // 获取精选题库列表
      const res = await choice(this.paging)

      this.choiceList = res.data.items
      this.counts = res.data.items.length
      this.total = res.data.counts

      //   console.log(this.choiceList)
    },

    handleSizeChange (val) {
      this.paging.pagesize = val
      this.handleClick()
    },

    handleCurrentChange (val) {
      this.paging.page = val
      this.handleClick()
    },

    // 删除后重新渲染
    Const () {
      this.handleClick()
    }
  },
  components: {
    QuestionBank,
    Choiceness
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin: 10px 0;
}
</style>
